import React, { useState } from 'react'
import styles from './index.module.less'
import CustomTabs from '@/components/CustomTabs'
import { Divider } from 'antd-mobile'
import CommentMsg from './components/commentMsg'
import LikeMsg from './components/likeMsg'
import FansMsg from './components/fansMsg'
const Message = () => {
  const [activeTab, setActiveTab] = useState('0') // 初始选中的标签
  const tabs = [
    { key: '0', value: '评论和@' },
    {
      key: '1',
      value: '赞和收藏'
    },
    {
      key: '2',
      value: '新增关注'
    }
  ] // 标签列表，根据需要进行扩展
  const handleTabChange = (tab: any) => {
    setActiveTab(tab.key)
    console.log('tab', tab) // 处理标签切换事件
  }
  return (
    <div className={styles.messagePage}>
      <CustomTabs
        activeTab={activeTab}
        tabs={tabs}
        handleTabChange={tab => handleTabChange(tab)}
      />
      <Divider></Divider>
      <div className={styles.tabItem}>
        {
          activeTab === '0' ? (
            <CommentMsg itemKey='0' />
          ) :""

        }
        {
          activeTab === '1' ? (
            <LikeMsg itemKey='1' />
          ) :""
        }
        {
          activeTab === '2' ? (
            <FansMsg itemKey='2' />
          ) :""
        }
      </div>
    </div>
  )
}
export default Message
